<template>
  <div class="login">
    <h3>嘉盛公司电子台账系统</h3>
    <div class="login-form">
      <el-form :model="userInfoForm" label-width="80px">
        <el-form-item label="用户名：">
          <el-input v-model.trim="userInfoForm.username" />
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model.trim="userInfoForm.password" type="password" show-password />
        </el-form-item>
      </el-form>
      <el-button plain @click="login" @keydown.enter="keyDown()">登录</el-button>
    </div>
  </div>
</template>

<script setup>
import loginApi from '@/api/login'
import { userStore } from '@/store/user'
import {ElMessage} from "element-plus";
const router = useRouter()
const store = userStore()
const { userInfo,ud } = storeToRefs(store)
const userInfoForm = reactive({
  username: '',
  password: ''
})
// 登录
const login = async () => {
  const res = await loginApi.login({
    username: userInfoForm.username,
    password: userInfoForm.password
  })
  if (typeof(res)!="undefined") {
    // 保存数据
    store.userInfo = res.data.permit;
    store.ud = res.data.ud;
    // 跳转页面
    router.push({
      path: '/data-center/bid/list'
    });
  } else {
    ElMessage({
      message: '用户名或密码错误',
      type: 'error'
    })
  }
}
//点击回车键搜索
const keyDown = (e) => {
  if (e.keyCode == 13) {
    login()
  }
}
onMounted(() => {
  //绑定监听事件
  window.addEventListener('keydown', keyDown)
})
onUnmounted(() => {
  //销毁事件
  window.removeEventListener('keydown', keyDown, false)
});

</script>

<style scoped lang="scss">
@import '../../assets/style/index.scss';
.login {
  background-color: $background-color;
  position: relative;
  h3 {
    text-align: center;
    font-size: 0.3rem;
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .login-form {
    height: 2rem;
    width: 4.4rem;
    border: 0.01rem solid #eeeeee;
    border-radius: 0.08rem;
    position: absolute;
    top: 2.6rem;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 0.3rem 0.2rem;
  }
}

:deep(.el-form) {
  .el-form-item {
    .el-form-item__label {
      padding: 0;
      color: #000000;
      font-size: 0.18rem;
    }
    .el-input__inner {
      height: 0.36rem;
      font-size: 0.16rem;
    }
  }
}
.el-button {
  position: absolute;
  color: #000000;
  top: 1.6rem;
  left: 1rem;
  height: 0.4rem;
  width: 3.6rem;
  font-size: 0.18rem;
  // color: $background-color;
}
</style>